<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>充值</view>
				</view>
				<view class="flex a-center place rule">
					<u-icon name="file-text" size="40" class="msg"></u-icon>
					<view>充值记录</view>
				</view>
			</view>
		</view>
		<view class="title-line">金币充值</view>
		<view class="block flex wrap">
			<view class="re flex j-center a-center" v-for="item,i in list" :key="i" @tap="change(i)">
				<view class="item flex col j-center a-center" :class="{'active':value === i}">
					<view class="v">{{item.v}}</view>
					<view class="coin">
						<image class="image" src="../static/icon/idx/idx(7).png"></image>
					</view>
					<view class="c">{{item.c}}元</view>
				</view>
			</view>
		</view>
		<view class="title-line">支付方式</view>
		<view class="block">
			<view class="flex j-between a-center" @tap="ctype(1)">
				<view class="flex a-center">
					<u-icon name="weixin-fill" size="48" color="#07C160"></u-icon>
					<view class="t-name">微信支付</view>
				</view>
				<view class="chk-item flex j-center a-center" :class="{active:type === 1}">
					<u-icon name="checkbox-mark" color="#FFF" size="20"></u-icon>
				</view>
			</view>
			<view class="split">
				<u-line length="#F2F2F2" color="#F2F2F2"></u-line>
			</view>
			<view class="flex j-between a-center" @tap="ctype(2)">
				<view class="flex a-center">
					<u-icon name="zhifubao-circle-fill" size="48" color="#02A9F1"></u-icon>
					<view class="t-name">支付宝支付</view>
				</view>
				<view class="chk-item flex j-center a-center" :class="{active:type === 2}">
					<u-icon name="checkbox-mark" color="#FFF" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="submit flex j-center a-center">
			<view>立即充值</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			value:-1,
			list:[{c:5,v:500},{c:10,v:1000},{c:20,v:2000},{c:50,v:5000},{c:100,v:10000},{c:500,v:50000}],
			type:1,
		}
	},
	methods: {
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+10)+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
		change(i){
			this.value = i
		},
		ctype(i){
			this.type = i
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #333;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 33%;}
	.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
}
.title-line{font-size: 32rpx;color: #333;margin: 32rpx 0;font-weight: bold;}
.block{background-color: #FFF;border-radius: 16rpx;padding: 32rpx 24rpx;color: #333;
	.re{width: 33.33%;height: 268rpx;
		.item{width: 170rpx;height: 220rpx;border: 2rpx solid #F2F2F2;border-radius: 16rpx;background: #F9F9F9;
			color: #333333;
			.v{font-weight: bold;font-size: 32rpx;}
			.c{font-size: 24rpx;margin-top: 16rpx;}
			.coin{margin-top: 16rpx;width: 48rpx;height: 48rpx;}
		}
		.active{border: 2rpx solid #246FDD;background: rgba(36, 111, 221, 0.1);}
	}
	.chk-item{width: 32rpx;height: 32rpx;border:2rpx solid #999;border-radius: 100%;}
	.active{background-color: #246FDD;border:none;}
	.split{margin: 32rpx 0;}
	.t-name{font-size: 32rpx;margin-left: 24rpx;}
}
.submit{height: 88rpx;border-radius: 16rpx;color: #FFF;font-size: 32rpx;background-color: #246FDD;margin-top: 48rpx;}
</style>
